<template>
<div>
    <h2 style="text-align: center">用户投资赎回</h2>
    <table class="table table-bordered">
        <tr>
            <td>项目名称</td>
            <td>{{ info.I_Name }}</td>
        </tr>

        <tr>
            <td>投资项目总金额</td>
            <td>{{ info.I_Budget }}</td>
        </tr>

        <tr>
            <td>用户已投资金额</td>
            <td>{{ info.UI_Money }}</td>
        </tr>

        <tr>
            <td>用户赎回金额</td>
            <td>
                <input type="text" v-model="URmoney" placeholder="请输入用户赎回金额">
            </td>
        </tr>

        <tr>
            <td colspan="2" style="text-align: center;">
                <input type="button" value="保存" class="btn btn-success" @click="SaveData">
            </td>
        </tr>
    </table>
</div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { useRoute } from 'vue-router';
import {ref,onMounted} from 'vue';

//创建路由实例
const route=useRoute();

//创建响应式数据
const info=ref({
    I_Name:"",
    I_Budget:0,
    UI_Money:0
})
const URmoney=ref("")

//生命周期函数钩
onMounted(()=>{
    LoadData()
})

//加载数据
const LoadData=()=>{
    axios.get("https://localhost:44321/api/Invest/GetUserInvestRedeem",
        {
            params:{
                UIid:route.params.UIid
            }
        }
    )
    .then(res=>{
        info.value=res.data[0]
    })
}

//完成用户投资赎回
const SaveData=()=>{
    //判断用户赎回金额不能大于用户已投资金额
    if(Number(URmoney.value)>Number(info.value.UI_Money))
    {
        alert('用户赎回金额需小于用户投资金额');
        return;
    }

    axios.post("https://localhost:44321/api/Invest/AddUserInvestRedeemInfo",
        {
            UI_Id:route.params.UIid,
            UTR_Money:URmoney.value
        }
    )
    .then(res=>{
        if(res.data>0)
        {
            alert('用户投资赎回成功');
        }
        else
        {
            alert('用户投资赎回失败!!!')
        }
    })
}


</script>